*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{font-size:16px;}
body{width:100%;height:100%;min-height:600px;color:#22222d;/*font-family:"Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;*/overflow-x:hidden;}
li{list-style-type:none}
header,section,footer{width:100%}
section{margin:10px auto 0 auto}
a:link,a:visited,a:hover,a:active{text-decoration:none}
h1{font-size:160%;margin:20px auto;font-weight:normal}
h2{font-size:120%;margin:15px auto}
p{margin:0;line-height:1.7em}
address{font-size:120%}
address p{margin:1em auto 2em auto;text-indent:2em}
address img{width:10px;height:auto;margin:-3px 5px auto auto}
img.img-responsive{width:100%;}
video::-webkit-media-controls{display:none!important}
/* ============================================= base ============================================= */
.text-indent{text-indent:2em}
.m20{margin:20px}
.p15{padding:15px}
.p15h{padding:0 15px}
.w80{margin:15px 10%;width:80%}
.w90{margin:15px 5%;width:90%}
.w100{margin:15px 0;width:100%}
.f80{font-size:80%}
.f100{font-size:100%}
.f120{font-size:120%}
.f140{font-size:140%}
.f160{font-size:160%}
.white{color:#fff}
.black{color:#22222d}/* R:34  G:34  B:45  */
.gray-d{color:#55555d}/* R:85  G:85  B:93  */
.gray-m{color:#88888d}/* R:136  G:136  B:141  */
.gray-l{color:#c9c9c9}/* R:201  G:201  B:201   */
.gray-bg{background-color:#f6f6f6}/* R:246  G:246  B:246   */
.blue{color:#00bcd4}/* R:0  G:188  B:212  */
.orange{color:#ff9c00}/* R:0  G:188  B:212  */
/* icon style */
.row{margin:0;}
.btn:link,.btn:visited,.btn:hover,.btn:active{color:#fff}
.btn-hollow-rounded{padding:.8em 1.3em;color:#fff;background-color:rgba(255,255,255,.1);border-color:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;}
.btn-gray-l-rounded{padding:.8em 1.5em;max-width:400px;color:#55555d;background-color:#ddd;border-color:#88888d;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;}
.btn-gray-l-rounded:link,.btn-gray-l-rounded:visited,.btn-gray-l-rounded:hover,.btn-gray-l-rounded:active{color:#55555d}
.btn-gray-rounded{margin:10px 10px 13px 10px;width:6em;max-width:400px;padding:.2em 0;text-align:center;color:#fff;background-color:#666;border:none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;}
.btn-black-rounded{padding:.3em 1.2em;max-width:400px;color:#fff;background-color:rgba(34,34,45,.9);border-color:#22222d;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
/* Bootstrap css overwrite */
.text-uppercase{margin:auto 15px 15px 15px;color:#333;font-style:italic;font-weight:normal;display:inline-block}
.text-uppercase-mobile{margin:15px auto 10px auto;color:#22222d;font-size:90%;font-style:italic;font-weight:normal;display:inline-block}
/* nav */
.navbar{margin-bottom:0;height:60px;z-index:9998}
.menu-icon{position:absolute;margin:20px}
.menu-icon>img{width:auto;height:15px}
.logo-top{position:fixed;margin:auto 31%;width:38%;line-height:60px;text-align:center;display:inline-block}
.logo-top>img{margin:0;width:100%;max-width:157.313px;height:auto;max-height:46px}
.code-left{margin-left:17%}
.code-right{margin-right:17%}
.code-left,.code-right{width:37%;max-width:200px;}
.code-left>a>img,.code-right>a>img{width:100%;height:auto;}
/* left hidden menu*/
.left-hide-menu{position:fixed;top:0;left:-50%;bottom:0;width:50%;height:100%;right:0;z-index:9995;background-color:#22222d;}
/*.left-hide-menu{position:fixed;top:0;left:0;bottom:0;width:256px;height:100%;right:0;z-index:9995;background-color:#22222d;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;}*/
.left-hide-menu>ul{margin-top:60px}
.left-hide-menu>ul>li>a{padding-left:18%;width:100%;height:60px;color:#fff;font-size:120%;line-height:60px;display:inline-block}
.left-hide-menu>ul>li>a.selected{background-color:#55555d}
.main-mobile{position:absolute;margin:0;padding-bottom:110px;background-color:#fff;z-index:9996;-webkit-box-shadow:-5px 0 5px #22222d;-moz-box-shadow:-5px 0 5px #22222d;box-shadow:-5px 0 5px #22222d;}
/*.slideout-open,.slideout-open body,.slideout-open.slideout-panel{overflow:hidden;}*/
/*.slideout-open .slideout-menu{display:block;}*/
/* header */
.banner{margin:50px auto 0 auto;padding:0;width:100%;height:100vmin;overflow:hidden}
.banner>.cover{position:absolute;margin:0;width:100%;height:100%;
    background:transparent; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .5)));
    background:-o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));}
.banner>.cover>.row{position:absolute;margin:0;width:100%;bottom:40px;}
/* footer */
.footer-mobile{position:absolute;bottom:0;padding:10px 0 20px 0;font-size:80%;color:#999;background-color:#333}
/* ============================================= individual ============================================= */
/* videos */
.video-list{position:relative;margin:30px auto;width:100%;text-align:left;clear:both;}
.video-row{margin-top:10px;width:100%;}
a.video-item{position:relative;margin-left:0;width:48.5%;height:auto;text-align:center;overflow:hidden;display:inline-block}
a.video-item.right{margin-right:0;float:right}
a.video-item img{width:100%;height:auto;vertical-align:top}
.video-explain-mobile{position:absolute;padding-top:10%;width:100%;height:100%;top:0;bottom:0;font-size:120%;color:#fff;background-color:rgba(0,0,0,.6)}
.video-explain-mobile>i{font-size:120%}
.video-explain-mobile>p{margin-top:.3em}
/* security */
.security .pull-left,.security .pull-right{margin:5% auto 5% 7%;width:40%;height:auto;display:inline}
.security .pull-right{margin:5% 7% 5% auto}
.security img{width:50%}
.security p{font-size:120%}
    /* carousel & carousel overwrite */
.carousel{margin-top:30px;height:300px}
.carousel-indicators{bottom:0}
.carousel-indicators li{width:11px;height:11px;margin:auto 5px;background-color:#c9c9c9;border:1px solid #c9c9c9}
.carousel-indicators .active{margin:auto 5px;}
.carousel-inner,.carousel-inner .item,.carousel-inner>.item>img{width:100%;height:100%}
.carousel-caption{left:5%;right:5%;height:250px}
.carousel-caption>.row:first-child{position:absolute;margin:auto;width:100%;top:0}
.carousel-caption>.row:last-child{position:absolute;margin:auto;width:100%;bottom:35px}
.icon{width:70px;height:70px;border:3px solid #fff}
/* how family */
.how-pet-sitter{position:relative;width:100%}
.how-pet-sitter>.bottom{position:absolute;bottom:0;width:100%;height:auto;color:#fff;background-color:rgba(0,0,0,.7)}
.how-to-foster>ul>li>a{position:relative;width:90%;margin:5%;color:#22222d;display:inline-block;
    -webkit-box-shadow:  0 0 10px #c9c9c9;
    -moz-box-shadow:  0 0 10px #c9c9c9;
    box-shadow:  0 0 10px #c9c9c9;}
.how-to-foster>ul>li>a>video{width:100%;height:auto;}
.how-to-foster>ul>li>a>img{position:absolute;width:20%;left:40%;bottom:60%}
.explain-mobile{margin:15px auto 20px auto;width:90%;font-size:120%}
.explain-mobile>i{font-size:140%}
.explain-mobile>small{margin-left:5px;font-size:100%}
.explain-mobile>hr{margin:5px auto;border-color:#88888d}
.explain-mobile>p{text-indent:2em;text-align:justify}
.how-duty{position:relative;margin:0 auto -20px auto;min-height:33em;padding-top:15px;color:#fff}
.how-duty .text-uppercase-mobile{color:#fff}
.how-duty>p{position:absolute;bottom:100px;min-height:16em;left:5%;width:90%;}
.how-duty>.btn{position:absolute;bottom:30px;left:5%;width:90%;font-size:120%}
.how-duty>.family{position:absolute;width:90%;bottom:70px;left:5%;text-align:center}
.how-duty>.family>p{margin-bottom:30px;font-size:140%;}
.how-duty>.family>.btn{width:100%;font-size:120%}

/* security */
.security-icon{margin:0 auto}
.security-icon>ul>li{padding:20px 0}
.security-icon>ul>li:nth-child(odd){background-color:#f6f6f6}
.security-icon>ul>li>img{margin:auto;width:20%;height:auto}
.security-icon>ul>li>h3{font-size:140%;font-weight:normal}
.security-icon>ul>li>p{margin:10px auto 0 auto;width:90%;font-size:110%;color:#55555d}

/* help */
.sub-wrapper{margin-top:50px}
.sub-wrapper h3{margin:20px auto}
.help{margin:20px auto 100px auto;width:90%;}
.help .carousel-indicators{bottom:-10px}
.help-box{position:relative;margin-bottom:30px;height:250px;color:#fff;background-positon:top left;background-size: 100% 100%;overflow:hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
.help-box p{margin:10px auto;width:90%}
.help-box-show{position:absolute;padding-top:5%;width:100%;height:100%;background-color:transparent}
.help-box-show>.btn{width:90%;margin:5% auto auto;}
.help-box-show>.contact img{width:10%;max-width:40px;margin:10px;}

/* hospital */
.hospital{margin-top:50px;}
.hospital li{padding:20px 0 20px 0;border-bottom:1px solid #c9c9c9}
.dl-horizontal dt{width:5.5em;}
.dl-horizontal dd{margin-left:5.5em;}
.dl-horizontal-loose dt,.dl-horizontal-loose dd{padding-top:20px}

/* treaty */
.treaty{margin:10px auto;width:100%;height:100vh;border:none;}
/*================================ responsive ================================*/
@media (max-width: 320px) {
    html{font-size:14px;}
    .video-explain-mobile{position:absolute;padding-top:5%;}
}
@media (max-width: 700px) {
    .code-left{margin-left:10%;}
    .code-right{margin-right:10%;}
}
@media (min-width: 375px) {
    .help-box-show>p{font-size:18px;}
    .help-box-show>.contact img{margin:10px;min-width:45px;}
}
@media (min-width: 550px) {
    body{font-size:20px;}
    address{font-size:14px;}
    .navbar{height:65px;}
    .carousel{height:500px;}
    .carousel-caption{height:400px;}
    .carousel-caption>.row:last-child{bottom:50px;}
    .carousel-indicators{bottom:30px;}
    .how-duty>p{bottom:150px;}
    .how-duty>.btn{bottom:50px;}
    .security-icon{margin-bottom:50px;}
    .help-box-show>p{margin-top:30px;font-size:26px;}
    .help-box-show>.btn{margin-top:15%;}
    .help-box-show>.contact img{margin:20px;max-width:100px;}
}
